<template>
  <div class="mod-config">
    <div style="padding: 10px 40px;border: 1px solid #efefef;margin-bottom: 25px;">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-row :gutter="20">
            <el-col :span="8">昵称</el-col>
            <el-col :span="16">{{ dataObj.nickname }}</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">uid</el-col>
            <el-col :span="16">{{ dataObj.userId }}</el-col>
          </el-row>
          <el-row :gutter="20" style="display: flex;align-items: center">
            <el-col :span="8">头像</el-col>
            <el-col :span="16">
              <img :src="dataObj.avatar" alt style="width: 40px;height: 40px;" />
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">手机号</el-col>
            <el-col :span="16">{{ dataObj.phone }}</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">会员身份</el-col>
            <el-col :span="16" v-if="dataObj.grade==1">会员</el-col>
            <el-col :span="16" v-if="dataObj.grade==2">经理</el-col>
            <el-col :span="16" v-if="dataObj.grade==3">总监</el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row :gutter="20">
            <el-col :span="8">管家昵称</el-col>
            <el-col :span="16">{{ dataObj.stewardshipNickName }}</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">管家uid</el-col>
            <el-col :span="16">{{ dataObj.stewardshipUserId }}</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">管家手机号</el-col>
            <el-col :span="16">{{ dataObj.stewardshipPhone }}</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">管家微信号</el-col>
            <el-col :span="16">{{ dataObj.stewardshipWxNumber }}</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">管家会员身份</el-col>
            <el-col :span="16" v-if="dataObj.stewardshipGrade==1">会员</el-col>
            <el-col :span="16" v-if="dataObj.stewardshipGrade==2">经理</el-col>
            <el-col :span="16" v-if="dataObj.stewardshipGrade==3">总监</el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <div class="centerel">
      <el-row :gutter="20" type="flex" class="row-bg" justify="space-around">
        <el-col :span="4">
          <p>{{ dataObj.newCustomerForToday }}</p>
          <p>今日新增客户数</p>
        </el-col>
        <el-col :span="1" class="line">
          <div></div>
        </el-col>
        <el-col :span="4">
          <p>{{ dataObj.oneLevelCustomer }}</p>
          <p>一级客户数</p>
        </el-col>
        <el-col :span="1" class="line">
          <div></div>
        </el-col>
        <el-col :span="4">
          <p>{{ dataObj.twoLevelCustomer }}</p>
          <p>二级客户数</p>
        </el-col>
        <el-col :span="1" class="line">
          <div></div>
        </el-col>
        <el-col :span="4">
          <p>{{ dataObj.threeLevelCustomer }}</p>
          <p>三级客户数</p>
        </el-col>
        <el-col :span="1" class="line">
          <div></div>
        </el-col>
        <el-col :span="4">
          <p>{{ dataObj.fansNumber }}</p>
          <p>粉丝数</p>
        </el-col>
      </el-row>
    </div>
    <div style="display: flex;justify-content: center;margin: 20px;">
      <el-button type="primary" @click="goBack">返回</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataObj: {}
    };
  },
  props: ["id"],
  watch: {
    userId() {
      return this.userIds;
    }
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.$http({
        url: this.$http.adornUrl(`/sale/saleRelation/info/${this.id}`),
        method: "get"
      }).then(({ data }) => {
        this.dataObj = data.RelationInfoVo;
      });
    },
    goBack() {
      this.$emit("goBack");
    },
    // 章节
    chapter(id) {
      this.bookmanages = false;
      this.bookchapters = true;
      this.$nextTick(() => {
        this.$refs.seebookchapter.init(id);
      });
    }
  }
};
</script>
<style scoped>
.tableTitle {
  padding: 20px;
  font-size: 15px;
}
.el-row {
  font-size: 16px;
  margin: 15px 0;
}
.centerel {
  text-align: center;
  padding: 10px 20px;
  background: #f2f2f2;
  margin: 25px 0;
}
.line {
  display: flex;
  justify-content: center;
}
.line div {
  height: 100%;
  width: 1px;
  background: #bbb;
}
</style>
